import React, { memo } from 'react'
import {HeaderWrapper} from './styel'
import {Link} from 'react-router-dom'
export default memo(function HNThemeHeaderRecommend(props) {
    const {title,keyWords,link,keyWordClick} = props
    return (
        <HeaderWrapper>
            <div className="left">
                <a href="todo" className="title">{title}</a>
                {
                    keyWords && 
                    (
                        <div className="keyWords">
                    {
                        keyWords.map((item,index)=>{
                            return(
                                <span key={item} onClick={e=>{keyWordClick(item)}}>
                                    <span className="item">{item}</span>
                                    { index < keyWords.length -1 &&<span className="divider">|</span>}
                                </span>
                            )
                        })
                    }
                </div>
                    )
                }
            </div>
            <div className="right">
                <Link to={link} className="more">更多</Link>
                <i className="sprite_02 more-icon"></i>
            </div>
        </HeaderWrapper>
    )
})
